<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8" />
    <title>HL</title>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/hBgSnow-1.0.1.min.js"></script>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  #snowContainer{
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #canvas{
    position: fixed;
  }

  .ed{
    width: 30px;
    height: 100px;
  }
  </style>
 </head>
 <body>
  <div class="ed">
    <div id="snowContainer">
      <canvas id="canvas"></canvas>    
    </div>    
  </div>

 </body>
 <script type="text/javascript">

 $(document).ready(function(){
    hBgSnow({
      "canvas": "canvas",
      "colors": ["#00BCD4", "#CDDC39", "#E91E63", "#009688", "#FF6600", "white"],
      "snowsCount": 100,
      "snowSize": 5,
      "shadowSize": 3,
      "spedMaxX": 0.3,
      "spedMaxY": 0.3,
      "freshTime": 80,
      "onmousemove": {
        "run": true,
        "getRadious": 100
      }
    });
 });



 

 </script>
</html>